/*
 * @Author: 小胖沱 1643200914@qq.com
 * @Date: 2022-12-19 17:40:06
 * @LastEditors: 小胖沱 1643200914@qq.com
 * @LastEditTime: 2022-12-29 11:07:50
 * @FilePath: \jk_sort_front\src\pages\QueryReport\ProductionBroad\components\StockNumber.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Column } from '@antv/g2plot'
import { useEffect, useState } from 'react'

import styles from './stockNumber.module.less'

export const getRemFontSize = () =>
  Number(document.documentElement.style.fontSize.replace('px', ''))

export default (props) => {
  const { data } = props

  const [fontSize, setFontSize] = useState(16)
  const [chart, setChart] = useState<null | Column>()

  useEffect(() => {
    window.addEventListener('resize', changeSize)
    changeSize()
  }, [])

  const changeSize = () => {
    const screenWidth = window.innerWidth
    if (screenWidth < 1280) {
      setFontSize(16)
    } else {
      setFontSize(28)
    }
  }

  useEffect(() => {
    const columnPlot = new Column('stockDom', {
      data: [],
      xField: 'type',
      yField: 'sales',
      // width: 500,
      autoFit: true,
      tooltip: false,
      label: {
        // 可手动配置 label 数据标签位置
        position: 'middle', // 'top', 'bottom', 'middle',
        // 配置样式
        // style: {
        //   fill: '#FFFFFF',
        //   opacity: 1
        // },
        layout: [
          // 柱形图数据标签位置自动调整
          { type: 'interval-adjust-position' },
          // 数据标签防遮挡
          { type: 'interval-hide-overlap' }
          // 数据标签文颜色自动调整
          // { type: 'adjust-color' }
        ]
      },
      color: '#0EC5DF',
      // color: ({ type }) => {
      //   if (type.includes('黑色')) {
      //     return '#000000'
      //   }
      //   return '#0EC5DF'
      // },
      xAxis: {
        label: {
          autoHide: true,
          autoRotate: false,
          style: {
            // lineHeight: 20,
            fill: '#FFFFFF',
            fontSize: fontSize
          }
        }
      },
      yAxis: {
        range: [0, 0.8],
        title: {
          text: '件数',
          autoRotate: false,
          position: 'end',
          offset: 20,
          style: {
            fontSize: fontSize,
            fill: '#FFFFFF'
          }
        },
        label: {
          style: {
            fontSize: fontSize,
            fill: '#FFFFFF'
          }
        },
        grid: {
          line: {
            style: {
              lineWidth: 1,
              lineDash: [2, 5]
            }
          }
        }
      },
      meta: {
        type: {
          alias: '款色码'
        },
        sales: {
          alias: '件'
        }
      },
      maxColumnWidth: 48
    })
    columnPlot.render()

    setChart(columnPlot)
  }, [])

  useEffect(() => {
    if (chart) {
      const barData = []
      data.forEach((item) => {
        barData.push({
          styleCode: item.styleCode,
          color: item.color,
          type: `${item.styleCode}\n${item.color}_${item.size}`,
          sales: item.stockAmount
        })
      })
      chart.update({
        data: barData
      })
    }
  }, [chart, data])

  useEffect(() => {
    window.addEventListener('resize', resize)
    resize() // 初始化

    return () => {
      window.removeEventListener('resize', resize)
    }
  }, [chart])

  const resize = () => {
    if (!chart) return
    chart.update({
      label: {
        style: {
          fontSize: getRemFontSize() * 1,
          fill: '#FFF'
        }
      },
      xAxis: {
        label: {
          style: {
            fontSize: getRemFontSize() * 1,
            lineHeight: getRemFontSize() * 1.45
          }
        }
      },
      yAxis: {
        label: {
          style: {
            fontSize: getRemFontSize() * 1.25
          }
        },
        title: {
          style: {
            fontSize: getRemFontSize() * 1.25
          }
        }
      },
      maxColumnWidth: getRemFontSize() * 3
    })
  }

  return (
    <div className={styles.container}>
      <header className={styles.stockHeader}>大烫库存量</header>
      <div id="stockDom" className={styles.stockBox} />
    </div>
  )
}
